<template>
    <div>
        <el-scrollbar>
            <div class="title">AI图片定位工具</div>
            <div class="subTitle">
                <div v-if="!isSearch">
                    请<span @click="uploadImg">选择</span>图片
                    <br />
                    <span class="subContent">欢迎使用AI图片定位工具，您可以上传一张图片，我们将给您找到图片的详细定位</span>
                </div>
                <div v-else>检索完成！</div>
            </div>
            <div class="imgUpload center">
                <ImgUpload ref="imgUpload" height="300" width="300" imgHeight="500" @getImgName="getImgName" />
            </div>
            <div class="center" v-if="!isSearch">
                <el-button @click="SearchImg" type="info">检索</el-button>
            </div>
            <div v-if="isSearch" class="center" style="flex-direction: column;">
                <div class="imgInfo">
                    <div>
                        <span>
                            <el-icon>
                                <School />
                            </el-icon>城市： <span style="color: white;">{{ city }}</span>
                        </span>
                    </div>
                    <div>
                        <span><el-icon>
                                <OfficeBuilding />
                            </el-icon>省份：<span style="color: white;">{{ province }}</span>
                        </span>
                    </div>

                    <div>
                        <span>
                            <el-icon>
                                <Location />
                            </el-icon>国家：<span style="color: white;">{{ country }}</span>
                        </span>
                    </div>
                    <div>
                        <span>
                            <el-icon>
                                <Place />
                            </el-icon>经纬度：<span style="color: white;">{{ latitude }}</span>
                        </span>
                    </div>

                    <div style="font-size: 35px">
                        <span><el-icon>
                                <PictureFilled />
                            </el-icon>解释：</span>
                        <div style="font-size: 20px;">{{ describe }}</div>
                    </div>

                </div>

                <ImgUpload style="margin: 20px 0;" height="300" width="1000" imgWidth="800" :imgUrl="mapUrl" />
            </div>

            <div class="source" v-if="isSearch">
                <div style="font-size: 40px;">来源</div>
                <div style="font-size: 20px;">根据您提供的照片我们找到了以下相关建筑：</div>
                <div style="width: 100%;display: flex;justify-content: center;">
                    <div style="width: 1300px;">
                        <img style="margin: 10px;
                        width: 300px;
                        height: 300px;
                        object-fit: cover; /* 保持比例并裁剪多余部分 */
                        object-position: center; /* 居中显示图片 */" :src="i" v-for="i in imgList" :key="i" alt="" />
                    </div>
                </div>


            </div>


            <div class="center">
                <el-button style="width: 130px;" v-if="isSearch" @click="clearImg" type="info">重新选择</el-button>
            </div>
        </el-scrollbar>
    </div>

</template>

<script setup>
import ImgUpload from '@/components/SmallEle/ImgUpload.vue'
import { ElLoading } from "element-plus";
import { Location, Place, PictureFilled, School, OfficeBuilding } from '@element-plus/icons-vue'
import { ref, onMounted, watch } from 'vue';

//图片的名字
const imgName = ref('')
//是否已经检索完成
const isSearch = ref(false)

const city = ref('')
const province = ref('')
const country = ref('')
const latitude = ref('')
const describe = ref('')
//地图地址
const mapUrl = ref('')
//八张小图
const imgList = ref([])

// 获取 ImgUpload 组件实例的引用
const imgUpload = ref(null);

//通过子组件传递图片名字
const getImgName = (name) => {
    imgName.value = name
}

//点击选择
const uploadImg = () => {
    imgUpload.value.fileChange()
}

//点击检索
const SearchImg = () => {
    if (imgName.value == '') {
        alert("请上传图片")
    } else {
        const loading = ElLoading.service({
            lock: true,
            text: '检索中...',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        setTimeout(() => {
            loading.close()
            isSearch.value = true
        }, 1000)
    }

}

const clearImg = () => {
    imgName.value = ''
    isSearch.value = false
    imgList.value.length = 0
    imgUpload.value.clearImg()
}

watch(imgName, (newVal) => {
    if (newVal.split(".")[0] == "图片1") {
        city.value = "北京"
        province.value = "北京"
        country.value = "中国"
        latitude.value = "116.40887，39.8817"
        describe.value = '图片显示的是天坛，位于中国北京，被联合国教科文组织列为世界遗产。天坛以其独特的圆形建筑、蓝色与金色的屋顶与其在中国宗教和文化史上的重要意义而闻名。'
        imgList.value.push(require("@/img/AI图片工具/北京/images.jpg"))
        imgList.value.push(require("@/img/AI图片工具/北京/images (1).jpg"))
        imgList.value.push(require("@/img/AI图片工具/北京/images (2).jpg"))
        imgList.value.push(require("@/img/AI图片工具/北京/images (3).jpg"))
        imgList.value.push(require("@/img/AI图片工具/北京/images (4).jpg"))
        imgList.value.push(require("@/img/AI图片工具/北京/images (5).jpg"))
        imgList.value.push(require("@/img/AI图片工具/北京/images (6).jpg"))
        imgList.value.push(require("@/img/AI图片工具/北京/images (7).jpg"))

        mapUrl.value = require("@/img/AI图片工具/beijing.png")
    }
    if (newVal.split(".")[0] == "图片2") {
        city.value = "杭州"
        province.value = "浙江"
        country.value = "中国"
        latitude.value = "120.14168，30.24528"
        describe.value = '这张照片拍摄于中国杭州西湖。照片中是一艘船上的中国传统亭子，这是西湖上常见的景象。背景中的山脉也是杭州地区的特色。'
        imgList.value.push(require("@/img/AI图片工具/杭州/images.jpg"))
        imgList.value.push(require("@/img/AI图片工具/杭州/images (1).jpg"))
        imgList.value.push(require("@/img/AI图片工具/杭州/images (2).jpg"))
        imgList.value.push(require("@/img/AI图片工具/杭州/images (3).jpg"))
        imgList.value.push(require("@/img/AI图片工具/杭州/images (4).jpg"))
        imgList.value.push(require("@/img/AI图片工具/杭州/images (5).jpg"))
        mapUrl.value = require("@/img/AI图片工具/hangzhou.png")
    }
    if (newVal.split(".")[0] == "图片3") {
        city.value = "禾木村"
        province.value = "新疆"
        country.value = "中国"
        latitude.value = "87.43963，48.57101"
        describe.value = '照片中是一座坐落在雪山脚下的村庄，房屋为传统的木结构建筑，屋顶覆盖着皑皑白雪，这是中国新疆禾木村的特色，周围白雪皑皑的群山和山谷景观也与当地风光相得益彰。'
        imgList.value.push(require("@/img/AI图片工具/杭州/images.jpg"))
        imgList.value.push(require("@/img/AI图片工具/新疆/images (1).jpg"))
        imgList.value.push(require("@/img/AI图片工具/新疆/images (2).jpg"))
        imgList.value.push(require("@/img/AI图片工具/新疆/images (3).jpg"))
        imgList.value.push(require("@/img/AI图片工具/新疆/images (4).jpg"))
        imgList.value.push(require("@/img/AI图片工具/新疆/images (5).jpg"))
        imgList.value.push(require("@/img/AI图片工具/新疆/images (6).jpg"))
        imgList.value.push(require("@/img/AI图片工具/新疆/images (7).jpg"))
        mapUrl.value = require("@/img/AI图片工具/xinjiang.png")
    }

})

onMounted(() => {

});


</script>

<style lang="scss" scoped>
.el-button {
    margin-top: 20px;
    width: 100px;
    height: 60px;
    font-size: 30px;
    line-height: 80px;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.title {
    color: rgb(246, 125, 12);
    text-align: center;
    font-size: 60px;
    margin-top: 10px;
}

.subTitle {
    color: white;
    font-size: 40px;
    margin-top: 10px;
    margin: 10px 0 0 30px;

    .subContent {
        font-size: 20px;
        color: rgb(152, 152, 152);
    }
}

.imgUpload {
    margin-top: 20px;
}

.imgInfo {
    display: flex;
    flex-direction: column;
    align-items: start;
    background-color: rgb(152, 152, 152);
    width: 800px;
    margin-top: 20px;
    font-size: 25px;
    border-radius: 10px;
    padding: 15px;

    div {
        color: white;

        >span {
            display: flex;
            justify-content: start;
            align-items: center;
            margin: 5px 0;
            color: black;



            .el-icon {
                margin: 0 10px;
            }
        }

    }
}

.source {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-content: center;
    color: white;

    div {
        text-align: center;
    }
}
</style>